<template>
  <div id="container">
    <div id="aside-column">
      <div id="logo-box">
        <el-image style="max-width: 50px; margin-top: 0.5rem" fit="cover" src="/env.svg"></el-image>
        <h4 style="color: #337ecc">东软环保公众监督平台管理系统</h4>
      </div>
      <el-menu
          id="aside-menu"
          default-active="/home/supervision/data"
          background-color="#a0cfff"
          text-color="#fff"
          active-text-color="#337ecc"
          router
      >
      <el-sub-menu index="/home/supervision">
        <template #title>
          <el-icon><ChatLineRound /></el-icon>
          <span>公众监督数据管理</span>
        </template>
        <el-menu-item index="/home/supervision/data">
          <el-icon>
            <tickets/>
          </el-icon>
          <span>公众监督数据列表</span>
        </el-menu-item>
        <el-menu-item index="/home/supervision/aqi">
          <el-icon><Document /></el-icon>
          <span>确认AQI数据列表</span>
        </el-menu-item>
      </el-sub-menu>
        <el-sub-menu index="/home/statistics">
          <template #title>
            <el-icon><DocumentCopy /></el-icon>
            <span>统计数据管理</span>
          </template>
          <el-menu-item index="/home/statistics/province">
            <el-icon><LocationInformation /></el-icon>
            <span>省分组检查统计</span>
          </el-menu-item>
          <el-menu-item index="/home/statistics/aqi-distribution">
            <el-icon>
              <upload/>
            </el-icon>
            <span>AQI指数分布统计</span>
          </el-menu-item>
          <el-menu-item index="/home/statistics/aqi-trend">
            <el-icon><DataLine /></el-icon>
            <span>AQI指数趋势统计</span>
          </el-menu-item>
          <el-menu-item index="/home/statistics/other">
            <el-icon><More /></el-icon>
            <span>其他数据统计</span>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>
    <div id="top-box">
      <div style="display: flex;justify-content: center;align-items: center; color: #303133">
        <el-icon>
          <data-analysis/>
        </el-icon>
        <h3 style="font-family: 'Microsoft YaHei UI Light',serif; padding: 0.5rem">{{ store.homeTitle }} </h3>
        <el-icon>
          <data-analysis/>
        </el-icon>
      </div>
      <div id="logout-tag">
        <span >系统管理员：{{store.account}}</span>
        <el-link @click="logout" style="margin-left: 1rem"  type="danger">登出</el-link>
      </div>
    </div>

    <div id="main-content">
      <el-breadcrumb class="breadcrumb" separator="/">
          <el-breadcrumb-item
              v-for="(item, index) in breadcrumbData"
              :key="item.path"
          >
            <!-- 不可点击项 -->
            <span class="no-redirect">{{
                item.meta.title
              }}</span>
            <!-- 可点击项 -->
<!--            <a v-else class="redirect" @click.prevent="onLinkClick(item)">{{-->
<!--                item.meta.title-->
<!--              }}</a>-->
          </el-breadcrumb-item>
      </el-breadcrumb>
      <el-config-provider :locale="locale">
        <router-view v-slot="{Component}">
          <transition name="el-fade-in" mode="out-in">
            <component :is="Component"></component>
          </transition>
        </router-view>
      </el-config-provider>
    </div>
  </div>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import useStore from '@/store/index'
import {useRouter, useRoute} from "vue-router";
import {onActivated, onMounted, reactive, watch} from "vue";
import {ElMessage} from "element-plus";
import {DataAnalysis} from "@element-plus/icons-vue";
import {logoutApi} from "@/api/userApi.ts";

const store = useStore()
const locale = zhCn
const router = useRouter()
const route = useRoute()
let breadcrumbData = reactive<Array<any>>([])
router.push('/home/supervision/data',)
const getBreadcrumbData = () => {
  //删除所有元素
  breadcrumbData.splice(0, breadcrumbData.length)
  const matched = route.matched
  let matchData = matched.filter((item) => item.meta.title).map((item) => {
    return {
      path: item.path,
      meta: item.meta
    }
  })
  breadcrumbData.push(...matchData)
}

watch(route, () => {
  getBreadcrumbData()
    },
    {immediate: true}
)


const judgeLogin = ()=>{
  if (store.account != ''){
    router.replace('/home/supervision/data')
  } else {
    ElMessage.warning('请先登录！')
    router.replace('/login')
  }
}
onMounted(() => {
  judgeLogin()
})
onActivated(()=>{
  judgeLogin()
})
const logout = async ()=>{
  store.account = ''
  let res = await logoutApi().catch((err)=>{
    ElMessage.error(err)
  })
  if (res?.data.code == 200){
    ElMessage.success('登出成功')
    await router.replace('/login')
  } else {
    ElMessage.error(res?.data.msg)
  }
}
</script>


<style scoped>
#container {
  display: flex;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#aside-column {
  position: absolute;
  left: 0;
  height: 100%;
  width: 18%;
  background-color: #a0cfff;
  top: 0;
}

#logo-box {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5rem;
}

#top-box {
  position: absolute;
  top: 0;
  width: 82%;
  height: 8%;
  left: 18%;
  background-color: white;
  /*background-color: rgb(51, 126, 204);*/
  /*background-color: rgb(64, 158, 255);*/
  box-shadow: 2px 2px 2px 2px #eaeaea;
  text-align: center;
}

#main-content {
  position: absolute;
  height: 92%;
  width: 82%;
  left: 18%;
  bottom: 0;
  background-color: rgba(245, 245, 245, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
#logout-tag{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 8%;
  top: 35%;
}
.breadcrumb{
  position: absolute;
  top: 1%;
  left: 2.5%;
  width: 95%;
  height: 2rem;
  display: flex;
  justify-content: flex-start;

}
</style>
